<template>
  <div class="menu-container">
    <template v-for="item in menuList">
      <section class="clearfloat menu">
      <header class="menu-category">{{item.title}}</header>
      <div class="moduel_fun" v-for="item1 in item.list">
       <a href="javascript:;"  :title="item1.Name" v-on:click="showMenu(item1.LinkUrl,item1.Name)">
        <el-tag class="moduel_block" type="primary" :hit="false"> <i :class="item1.Icon+' moduel_icon'"></i>
        <span class="moduel_name text-overflow-2">{{item1.Name}}</span>
        <span style="visibility:hidden">{{item1.Name}}</span>
        </el-tag>
      </a>
      </div>
     </section>
  </template>
  </div>
</template>
<script>
  import $ from 'jquery'
  require("../assets/js/jquery.dotdotdot.min.js");
 
  export default{
    data(){
      return {
      }
    },
    props:{
      menuList:{
        type: Array,
        default:[]
      }
    },
    methods:{
      showMenu(LinkUrl,Name){
        this.$emit('changeView',LinkUrl,Name);
      }
    },
    created(){
      this.$nextTick(function(){
         $(function(){
          $('.text-overflow-2').each(function(){
            var next=$(this).next(),width=next[0].offsetWidth,num=$(this)[0].offsetWidth-32;
             next.remove();
             if(width>num){
               $(this).addClass("lineheight-1");
             }else{
               $(this).addClass("lineheight-2");
             }
             $(this).dotdotdot();
          });
        });
         
      });
    }
  }
</script>
<style scoped lang="less">
.text-overflow-2{
  word-break:normal;
  /* white-space: nowrap; */
  text-align: left;
}
.lineheight-1{
  height:32px;
  line-height: 16px;
}
.lineheight-2{
  line-height: 28px;
  height:28px;
}
      .menu-container{
        //padding-top:10px;
        >.menu:not(:first-child){
          margin-top:10px;
        }
      }
      .menu-category{
        background-color: rgba(32,159,255,.1);
        border-color: rgba(32,159,255,.2);
        color: #20a0ff;
        padding: 10px;
        border-radius:5px; 
      }
      .moduel_fun{
        width:20%;
        display:block;
        float:left;
        padding-top:20px;
        padding-bottom:10px;
        >a{
          text-decoration: none;
          display:block;
          //max-width:140px;
          margin:auto;
        }
        .moduel_block{
            padding:20px 10px;font-size:14px;
            display:block;
            padding:14px 10px;
            margin:0 auto;
            text-align:center;
            height: 40px;
            height:60px;
            /* max-width:100px; */
            position:relative;
            /* height: auto; */
            .moduel_icon{
               font-size: 28px;
               position:absolute;
               height:28px;
               left:10px;
               top:0;
               bottom:0;
               margin:auto;
            }
            .moduel_name{
               position:relative;
               padding-left:32px;
               vertical-align: middle;
               //text-overflow:ellipsis;
               //overflow: hidden;
               //white-space: nowrap;
               display:block;
            }
        }
      }
      @media screen and (max-width: 1100px){
         .moduel_fun>span{
             margin:0 10px;
          }
      }
      @media screen and (max-width: 1200px){
         .moduel_fun{
            >a{
              max-width:140px;
            }
          }
      }
      @media screen and (min-width: 1200px){
          .moduel_fun{
            >a{
              max-width:180px;
            }
          }
      }
  </style>